<template lang="html">
  <div class="uploader">
    <input
      ref="uploaderInput"
      :accept="accept"
      type="file"
      @change="inputChange($event, acl)"
    />
    <div
      v-loading="loading"
      :class="{ showImg: !!previewImg, readonly }"
      class="upload-preview"
      @click="upload"
    >
      <img :src="previewImg" v-if="mediaType !== 2" />

      <video
        v-if="mediaType === 2"
        :src="previewImg"
        @click="goPreview"
        @touchend="goPreview"
      >
        你的浏览器不支持
      </video>
      <!--<vue-preview
        v-if="!(mediaType === 2) && showPreview && readonly && imgs.length"
        :slides="imgs"
        class="preview"
      />
      <img v-if="!(mediaType === 2) && !showPreview && previewImg" :src="previewImg" />
      <video
        v-if="mediaType === 2"
        :src="previewImg"
        @click="goPreview"
        @touchend="goPreview"
      >
        你的浏览器不支持
      </video>
      <i v-if="!readonly && !previewImg" class="el-icon-plus" />
      -->
    </div>
    <div class="video-view" @click="showMedia">
      点此预览
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="预览"
      :visible.sync="mediaVisible"
      append-to-body
    >
      <div style="display: flex; justify-content: center;">
        <video v-if="mediaType === 2" :src="src" controls />
        <video v-if="mediaType === 3" :src="src" controls />
        <img
          v-if="mediaType === 1"
          :src="previewImg"
          style="max-width: 100%; max-height: 100%;"
        />
      </div>
    </el-dialog>
    <slot />
  </div>
</template>

<script>
import uploadMixin from '@/mixin/upload';
import { getFileById } from '@/api/sys/file';
export default {
  mixins: [uploadMixin],
  props: {
    accept: {
      type: String,
      default: 'image/*',
    },
    value: {
      type: [Number, String],
      default: null,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    // defaultImg: {
    //   type: Boolean, //为什么这里是boolean值
    //   default: false,
    // },
    defaultImg: {
      type: String, //为什么这里是boolean值
      default: require('@/assets/images/doc.png'), //设置默认图片为文档图片
    },
    showImg: {
      type: Boolean,
      default: true,
    },
    showPreview: {
      type: Boolean,
      default: false,
    },
    acl: {
      type: String,
      default: '', // public 为永久链接
    },
    type: {
      type: [String, Number],
      default: 0, // 0 数字 1 url链接   为1时 需要配合acl=public使用
    },
  },
  data() {
    return {
      loading: false,
      previewImg: '',
      name: '',
      fileId: '',
      imgs: [
        {
          src: this.defaultImg ? require('@/assets/images/avatar.png') : '',
          msrc: this.defaultImg ? require('@/assets/images/avatar.png') : '',
          alt: '',
          title: '',
          w: 610,
          h: 610,
        },
      ],
      mediaType: 1, // 1: img 2:video 3:audio 4:doc
      src: '',
      mediaVisible: false,
    };
  },
  watch: {
    value: {
      handler(newVal) {
        if (this.type == 0) {
          this.fileId = newVal;
        } else {
          this.mediaType = 1;
          this.src = newVal;
          this.previewImg = newVal;
        }
        if (!newVal) {
          //不知道为什么 三元运算没用
          if (this.defaultImg) {
            this.previewImg = this.defaultImg;
          } else {
            this.previewImg = require('@/assets/images/avatar.png');
          }
        }
      },
      immediate: true,
    },
    fileId: {
      handler(newVal) {
        if (!newVal) {
          return;
        }

        if (this.showImg) {
          this.getImgUrl();
        } else {
          this.loading = false;
        }
        if (this.type == 1) {
          this.$emit('input', this.src);
        } else {
          this.$emit('input', newVal);
        }
      },
      immediate: true,
    },
    previewImg: {
      //不知道 previewImg 啥时候为空
      handler(newVal, oldVal) {
        if (!newVal && oldVal) {
          this.previewImg = oldVal;
        }
        if (this.type == 1) {
          this.$emit('input', this.previewImg);
        }
      },
      immediate: true,
    },
  },
  created() {
    this.previewImg = this.defaultImg || require('@/assets/images/avatar.png');
  },
  methods: {
    goPreview() {
      if (!this.readonly) return false;
      const { href } = this.$router.resolve({
        name: `filePreview`,
        params: {
          id: this.fileId,
        },
      });
      window.open(href, '_blank');
    },
    upload() {
      // if (this.readonly) {
      //   if (this.showPreview) {
      //     this.getImgUrl();
      //   }
      //   return false;
      // }
      this.handleClick();
    },
    getImgUrl() {
      console.log('那是在这个后面嘛');
      if (this.fileId) {
        console.log(this.fileId, 'fileid');
        getFileById(this.fileId).then((res) => {
          this.imgs = [
            {
              src: res.url,
              msrc: res.url,
              alt: '',
              title: '',
              w: res.width || '610',
              h: res.height || '610',
            },
          ];
          this.previewImg = res.url;
          this.src = res.url;
          this.mediaType = 1;
          if (res.mimeType === 'video/mp4') {
            this.mediaType = 2;
          }
          if (res.mimeType === 'audio/mpeg') {
            this.mediaType = 3;
            this.previewImg = require('@/assets/images/Video.png');
          }
          if (/application/.test(res.mimeType)) {
            this.mediaType = 4;
            this.previewImg = require('@/assets/images/doc.png');
          }

          this.$emit('imgUrl', res.url);
          this.$emit('imgObj', res);
          this.loading = false;
        });
      } else {
        this.previewImg =
          this.defaultImg || require('@/assets/images/avatar.png');
      }
    },
    showMedia() {
      if (this.mediaType === 4) {
        //window.open('http://www.baidu.com')
        window.open(this.imgs[0]['src']);
        return;
      }
      this.mediaVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.uploader {
  display: inline-block;
  width: 80px;
  text-align: center;
  line-height: 80px;
  border-radius: 4px;
  color: #dcdfe6;
  border: 1px dashed #dcdfe6;
  overflow: hidden;
  &:hover {
    color: #c0c4cc;
    border-color: #c0c4cc;
  }
  input[type='file'] {
    display: none;
  }
  video {
    width: 100%;
    height: 100%;
    background: url('../../assets/images/Video.png') center no-repeat;
    background-size: 50% 50%;
  }
  .upload-preview {
    width: 100%;
    height: 100%;
    background: #eee;
    background: linear-gradient(
      to right bottom,
      rgba(101, 149, 254, 0.2),
      rgba(150, 150, 150, 0.1)
    );
    cursor: pointer;
    &.readonly {
      cursor: default;
    }
    &.showImg {
      line-height: 1;
    }
    img {
      width: 100%;
      vertical-align: top;
    }
  }
  .el-icon-plus {
    font-size: 20px;
    color: #999;
  }
  .preview {
    width: 100%;
    height: 100%;
    ::v-deep .my-gallery {
      width: 100%;
      height: 100%;
      figure {
        margin: 0;
      }
      img {
        width: 100%;
        height: 100%;
        vertical-align: top;
      }
    }
    ::v-deep .pswp {
      z-index: 9999999999;
    }
  }
  .video-view {
    width: 100%;
    line-height: 30px;
    border: 1px solid #666;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    color: white;
  }
}
</style>
